<template>
  <div>
    <p>热门搜索</p>
    <ul class="hotSearch">
      <li
        v-for="(hot, index) in hotSearch"
        :key="index"
        @click="$emit('change', hot.first)"
      >
        {{ hot.first }}
      </li>
    </ul>
    <div class="eimt" @click="del"><img src="../assets/eimt.png"></div>
    <ul class="history">
      <li v-for="(sh, index) in searchHistoryList" :key="index">
        <i><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
            <path
              fill-rule="evenodd"
              fill="#c9caca"
              d="M15 30C6.716 30 0 23.284 0 15S6.716 0 15 0s15 6.716 15 15-6.716 15-15 15m0-28C7.82 2 2 7.82 2 15s5.82 13 13 13 13-5.82 13-13S22.18 2 15 2m7 16h-8a1 1 0 0 1-1-1V7a1 1 0 1 1 2 0v9h7a1 1 0 1 1 0 2"
            /></svg
        ></i>
        <div @click="$emit('change', sh)">{{ sh }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "HotSearch",
  data() {
    return {
      hotSearch: [],
      searchHistoryList: [],
    };
  },
  created() {
    this.axios
      .get("/search/hot")
      .then((data) => {
        this.hotSearch = data.data.result.hots;
      })
      .catch((err) => {
        console.log(err);
      });
    this.searchHistoryList = JSON.parse(localStorage.getItem("searchHistory"));
    this.$root.searchHistory=this.searchHistoryList;
  },
  methods:{
    del(){
      localStorage.removeItem('searchHistory');
      this.$root.searchHistory=[];
      this.searchHistoryList=[];
    }
  }
};
</script>
<style lang="less" scoped>
p {
  font-size: 12px;
  color: #666;
  padding-left: 10px;
  padding-top: 10px;
}
.hotSearch {
  list-style: none;
  overflow: hidden;
  margin: 5px;
  li {
    float: left;
    border: 1px solid #ddd;
    font-size: 12px;
    padding: 5px;
    border-radius: 15px;
    margin: 5px;
  }
}
.eimt{
  width: 18px;
  height: 18px;
  position: absolute;
  right: 10px;
}
.history {
  margin-top: 15px;
  li {
    float: left;
    i {
      float: left;
      margin: 0px 10px;
      display: block;
      width: 15px;
      height: 45px;
      svg {
        margin: 15px auto;
        width: 15px;
        height: 15px;
      }
    }
    div{
      font-size: 14px;
      height: 45px;
      line-height: 45px;
      width: 250px;
      color: #333;
      float: left;
      border-bottom: 1px solid #fbfcfd;
    }
  }
}
</style>